<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES5 传统的对象取值   => 依次取出对象中的每个值 赋值给变量
    // var zhang = {
    //     name: "张三",
    //     age: 18,
    //     height: "173cm",
    //     weight: "70kg",
    // }

    // var name = zhang.name;
    // var age = zhang.age;
    // var height = zhang.height;
    // var weight = zhang.weight;


    // ES6 解构赋值
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

    // 对象解构  => 对应键名解构

    // 完全解构
    // var data = { a: 1, b: 2, c: 3 }
    // var { a, b, c } = data;
    // console.log(a, b, c);

    // 不完全解构
    // var { a, c } = { a: 1, b: 2, c: 3 };
    // console.log(a, c);

    // 解构不成功 => undefined
    // var { a, b, c, d } = { a: 1, b: 2, c: 3 };
    // console.log(a, b, c, d);

    // 解构过程中 可以给变量设置默认值
    // var { a, b, c, d = 0 } = { a: 1, b: 2, c: 3 };
    // console.log(a, b, c, d);

    // var { a, b, c, d = 0 } = { a: 1, b: 2, c: 3, d: undefined };
    // console.log(a, b, c, d);

    // var { a, b, c, d = 0 } = { a: 1, b: 2, c: 3, d: null };
    // console.log(a, b, c, d);


    // 对象解构需要注意的问题:   不能对null和undefined使用解构
    // var { a } = null;
    // var { a } = undefined;


    // 高级用法
    // 对象解构配合扩展运算符 => 逆应用 Rest参数(合并剩余参数)

    var { a, b, ...c } = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
    // a => 1   b= > 2   ...c =>  c: 3, d: 4, e: 5, f: 6
    console.log(a, b, c);

    // 报错 Rest参数必须放在最后
    // var { a, ...b, c } = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
    // console.log(a, b, c);

    var { a, c, ...b } = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
    console.log(a, b, c);
















</script>

</html>